<template>
  <div id="app" ref="appRef" class="scrollbar-class" @scroll="handleScroll">
    <!-- <div
      style="height: calc(100% - 60px) !important; margin-bottom: 60px"
      v-if="store?.isPc === 2 && route?.meta?.navigationBar"
      class="container-box"
    >
      <slot />
    </div> -->
    <slot></slot>

    <!-- 移动端底部tab切换暂时注释 -->
    <navigationTabBar
      v-show="store?.isPc === 2 && route?.meta?.navigationBar"
    />
  </div>
  <!-- 客服聊天框PC -->
  <div class="serve-box" v-if="showServeBox && pageInfo && store.isPc == 1">
    <customerService :serveBoxContent="serveBoxContent"></customerService>
    <el-icon @click="showServeBox = false" class="close-chat"
      ><CloseBold
    /></el-icon>
  </div>
  <!-- 客服聊天框移动 -->
  <div
    class="serve-box-outer"
    v-if="showServeBox && pageInfo && store.isPc == 2"
  >
    <div class="serve-box">
      <customerService :serveBoxContent="serveBoxContent"></customerService>
      <el-icon @click="showServeBox = false" class="close-chat"
        ><CloseBold
      /></el-icon>
    </div>
  </div>
  <Chat v-show="pageInfo && store.isPc == 1"></Chat>
  <Toast ref="toastBoxRef"></Toast>
  <DialogComponent v-if="store.dialogVisible"> </DialogComponent>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import Chat from "@/components/pluginsComponent/Chat.vue";
import customerService from "@/components/customerService/index.vue";
import EventBus from "@/utils/eventBus.js";
import { CloseBold } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import Toast from "@/components/pluginsComponent/Toast.vue";
import { useStore } from "@/store/index";
import DialogComponent from "@/components/common/views/dialog.vue";
import navigationTabBar from "@/components/mobileComponent/navigationTabBar.vue";
import debounce from "lodash.debounce";
const appRef = ref(null);
const store = useStore();

const route = useRoute();
const router = useRouter();
const showServeBox = ref(false);
const serveBoxContent = ref("");
const handleChangeServeBox = (parmas) => {
  showServeBox.value = !showServeBox.value;
  serveBoxContent.value = parmas.message;
};
let pageInfo = ref(route.meta?.pageName);
// 弹框提示插件
const toastBoxRef = ref();
// toastText为提示内容，text如果存在则可以复制该内容到剪切板
const copyText = (parmas) => {
  toastBoxRef.value.copyText(...parmas);
};
// 监听当前路由用于判断是否显示聊天插件
watch(
  () => router.currentRoute.value,
  (newValue) => {
    pageInfo.value = route.meta.pageName || "";
  },
  { immediate: true }
);
const handleScroll = () => {
  const container = appRef.value;
  if (container) {
    // 检查是否滚动到底部
    const isBottom =
      container.scrollTop + container.clientHeight >=
      container.scrollHeight - 1;
    if (isBottom) {
      EventBus.emit("scrollToBottom");
      // 在这里可以触发你需要的操作，例如加载更多数据
    }
  }
};
function debouncedResize() {
  const screenWidth = window.innerWidth;

  // 检查屏幕宽度是否大于1200像素，如果是，则设置为PC端
  if (screenWidth > 1200) {
    store.setIsPc(1);
  } else {
    store.setIsPc(2);
  }
}
// 假设 debounce 是一个防抖函数（你需要自己实现或使用第三方库）
const debouncedResizeFunction = debounce(debouncedResize, 250);
onMounted(() => {
  EventBus.on("openCustomerChat", handleChangeServeBox);
  EventBus.on("openToastBox", copyText);
  // 判断是否有用户信息
  let userInfo = localStorage.getItem("aiseo-user-info");
  if (userInfo) {
    store.setUserInfo(JSON.parse(userInfo));
  }
  // 暂时注释移动端
  if (process.client) {
    window.addEventListener("resize", debouncedResizeFunction);
  }
});
onBeforeUnmount(() => {
  EventBus.off("openCustomerChat");
  EventBus.off("openToastBox");
  window.removeEventListener("resize", debouncedResizeFunction);
});
</script>
<style lang="scss">
#app {
  width: 100vw;
  height: 100vh;
  overflow: overlay;
  position: relative;
}
.serve-box-outer {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 17;
  .serve-box {
    width: calc(100% - 32px);
    max-width: 500px;
    z-index: 18;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px 8px 0 0;
  }
}
.serve-box {
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 9;
  width: 360px;
  height: 650px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  font-size: 16px;
  .close-chat {
    position: absolute;
    right: 1.25em;
    top: 1.25em;
    cursor: pointer;
    color: #fff;
    font-size: 1em;
  }
}

@media (min-width: 2400px) {
  .serve-box {
    width: 600px;
    height: 1000px;
    font-size: 24px;
  }
}
@media only screen and (max-width: 1200px) {
  .serve-box {
    width: 320px;
    height: 600px;
    font-size: 14px;
  }
}
@media (max-width: 600px) {
  /* 手机设备适配 */
  html {
    font-size: 12px; // 调整根元素字体大小
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  /* 平板设备适配 */
  html {
    font-size: 15px; // 调整根元素字体大小
  }
}
</style>
